'use strict';
let nums = parseInt(Math.random() * 20 + 1);
function displayMessage(message) {
  document.querySelector('.message').textContent = message;
}
// console.log(nums);

document.querySelector('.check').addEventListener('click', function () {
  let guessedValue = Number(document.querySelector('.guess').value);
  // win game
  if (guessedValue === nums) {
    displayMessage('Correct!!!');
    document.querySelector('body').style.backgroundColor = '#60b347';
    document.querySelector('.number').textContent = nums;
    document.querySelector('.number').style.width = '30rem';
    // highScore
    if (
      document.querySelector('.score').textContent >
      document.querySelector('.highscore').textContent
    ) {
      document.querySelector('.highscore').textContent =
        document.querySelector('.score').textContent;
    }

    //guessedValue is wrong
  } else if (guessedValue != nums && guessedValue >= 1 && guessedValue <= 20) {
    if (document.querySelector('.score').textContent > 1) {
      guessedValue > nums
        ? displayMessage('Too High!')
        : displayMessage('Too Low!');
      document.querySelector('.score').textContent--;
    } else {
      document.querySelector('.score').textContent = 0;
      displayMessage('You Lost The Game!');
    }

    // out of range
  } else {
    displayMessage(
      `Please print numbers ${document.querySelector('.between').textContent}`
    );
  }
});

// button 'again'
document.querySelector('.again').addEventListener('click', function start() {
  displayMessage('Start guessing...');
  document.querySelector('.guess').value = '';
  document.querySelector('.score').textContent = 20;
  document.querySelector('body').style.backgroundColor = '#222';
  document.querySelector('.number').style.width = '15rem';
  document.querySelector('.number').textContent = '?';
  // regenerate nums
  nums = parseInt(Math.random() * 20 + 1);
});
